<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星巴克 | 用每一杯咖啡传递星巴克独特的咖啡体验</title>
    <link crossorigin="anonymous"
        integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g=="
        href="//lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="icon" href="./images/logo.svg">
    <style>
        @font-face {
            font-family: "iconfont";
            src: url('iconfont.eot?t=1576319485555');
            src: url('iconfont.eot?t=1576319485555#iefix') format('embedded-opentype'),
                url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
                url('iconfont.woff?t=1576319485555') format('woff'),
                url('iconfont.ttf?t=1576319485555') format('truetype'),
                url('iconfont.svg?t=1576319485555#iconfont') format('svg');
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .icon-shouye:before {
            content: "\e626";
        }
        .icon-denglu:before {
            content: "\e612";
        }
        .icon-weibiaoti5:before {
            content: "\e63d";
        }
        .icon-gengduo:before {
            content: "\e66e";
        }
        .icon-kafei:before {
            content: "\e611";
        }
        .icon-mendian:before {
            content: "\e628";
        }
        .icon-guanbi:before {
            content: "\e608";
        }
        .icon-left:before {
            content: "\e66a";
        }
        .icon-caidan:before {
            content: "\e64f";
        }
        .icon-right:before {
            content: "\e671";
        }
        .icon-menu:before {
            content: "\e633";
        }
        html {
            font-size: 62.5% !important;
        }
        body {
            overflow-x: hidden;
            font-size: 1.6rem;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        i {
            font-style: normal;
        }
        a:hover {
            text-decoration: none;
        }
        .mouse-enter {
            transition: all 0.3s;
            position: relative;
            top: 0;
        }
        .mouse-enter:hover {
            top: -4px;
            box-shadow: 0 0 6px #0005;
        }
        /* 导航 */
        header {
            width: 100%;
        }
        header .navbar-nav {
            font-size: 1.6rem;
            font-weight: 700;
        }
        header .show-btn {
            z-index: 2;
        }
        header .icon-menu {
            font-size: 3rem;
        }
        header .close {
            font-size: 4rem;
            font-weight: 300;
        }
        header .body .title {
            font-weight: 700;
        }
        header .auth button {
            color: #00a862;
            font-size: 1.6rem;
        }
        header .login i {
            border: 2px solid #999;
            color: #999;
            padding: 0 7px;
            border-radius: 3px;
        }
        header .register {
            padding: 3px 10px;
            border: 1px solid #00a862;
            border-radius: 17px;
            font-weight: 500;
            background-color: #fff;
        }
        /* 更多弹出层 */
        header .popup {
            position: absolute;
            top: 10px;
            left: 0;
            background-color: #fff;
            width: 100%;
            padding-left: 70px;
            transition: all 0.4s;
        }
        header .popup.hide {
            opacity: 0;
            transform: scale(2);
        }
        header .popup li {
            font-weight: 700;
            font-size: 1.8rem;
            padding: 7px 0;
        }
        header .popup .divider {
            height: 1px;
            border-top: 1px solid rgba(0, 0, 0, 0.2);
            padding: 0;
            margin: 8px 0;
            width: calc(100% - 25px);
        }
        header .popup .bottom {
            font-weight: normal;
            font-size: 1.4rem;
            color: rgba(0, 0, 0, 0.38);
        }
        /* 右侧内容 */
        .right-content .imgs {
            background-color: #f7f7f7;
        }
        .right-content .description {
            color: rgba(0, 0, 0, 0.56);
            margin: 0 auto;
        }
        .right-content .description a {
            color: #c2a661;
        }
        .right-content .club .auth button {
            padding: 3px 13px;
            border: 1px solid #00a862;
            border-radius: 17px;
            font-weight: 500;
            background-color: #fff;
            color: #00a862;
        }
        /* 天猫 */
        .right-content .tmall {
            background-color: #f7f7f7;
        }
        .right-content .tmall .my-card {
            width: 166px;
            height: 198px;
            margin: 70px 10px 0;
            padding-top: 50px;
            flex: 0 1 40%;
            background-color: #fff;
        }
        .right-content .tmall .my-card img {
            width: 101px;
            position: absolute;
            left: calc(50% - 50px);
            top: -34px;
        }
        .right-content .tmall .my-card h4 {
            font-weight: bold;
            font-size: 1.6rem;
            flex: 1 0 45%;
        }
        .right-content .tmall .my-card .description {
            font-size: 1.4rem;
            line-height: 27px;
        }
        .right-content .tmall .my-card a {
            color: #c2a661;
            font-size: 1.2rem;
        }
        /* 文化 */
        .right-content .culture {
            background-color: #fdfdfd;
            overflow: hidden;
            height: 400px;
            margin-bottom: 80px;
        }
        .right-content .culture .card-list {
            transition: all 0.5s;
            top: 150px;
            left: 20px;
            width: 1236px;
        }
        .right-content .culture .card-list span {
            position: absolute;
            font-size: 1.4rem;
            background: #c2a661;
            color: #fff;
            left: 0;
            top: 6px;
            padding: 4px 12px;
        }
        .right-content .culture .card-list li {
            width: 288px;
            flex: 0 0 auto;
            display: inline-block;
            border: 1px solid #aaa;
            border-radius: 5px;
            margin-right: 10px;
        }
        .right-content .culture button {
            position: absolute;
            top: 60%;
            border-radius: 50%;
            background-color: darkcyan;
            width: 30px;
            height: 30px;
            border: 5px solid transparent;
        }
        .right-content .culture .right-btn {
            right: 0;
        }
        /* 底部 */
        .right-content footer {
            background-color: #fff;
            box-shadow: 0 0 7px #000a, 0 3px 5px #000a;
        }
        .right-content footer ul {
            padding: 0 60px;
        }
        .right-content footer li {
            font-size: 1.2rem;
            color: #6c757d;
            cursor: pointer;
        }
        .right-content footer .active {
            color: #00a862;
        }
        .right-content footer li i {
            font-size: 2rem;
        }
        /* 响应式 */
        @media (min-width: 576px) {
            html {
                font-size: 56%;
            }
        }
        @media (min-width: 768px) {
            html {
                font-size: 59%;
            }
            .right-content .tmall .my-card {
                flex: 0 1 20%;
            }
        }
        @media (min-width: 992px) {
            html {
                font-size: 62.5%;
            }
            header {
                height: 100vh;
                position: fixed !important;
            }
            header .body {
                height: calc(100vh - 73px);
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <header class="col-lg-4 pt-4">
                <div class="navbar navbar-expand align-items-start d-none d-sm-flex px-0">
                    <div class="navbar-brand mx-2">
                        <img src="./images/logo.svg" alt="" width="36">
                    </div>
                    <ul class="navbar-nav flex-wrap">
                        <li class="nav-link px-lg-2 px-4">门店</li>
                        <li class="nav-link px-lg-2 px-4">我的账户</li>
                        <li class="nav-link px-lg-2 px-4">菜单</li>
                    </ul>
                    <button class="btn p-0 ml-auto show-btn">
                        <i class="iconfont icon-menu"></i>
                    </button>
                </div>
                <div class="body d-lg-flex flex-wrap align-content-center pl-lg-5 py-4">
                    <h1 class="title pl-lg-5">心情惬意，来杯咖啡吧 ☕</h1>
                    <div class="auth mt-4 d-none d-sm-block pl-lg-5">
                        <button class="login btn"><i class="iconfont icon-denglu"></i> 登录</button>
                        <button class="register">注册</button>
                    </div>
                </div>
                <!-- 弹出层 -->
                <ul class="popup hide">
                    <li class="d-flex justify-content-between mr-2">
                        <img src="./images/logo.svg" class="position-relative" width="36"
                            style="left: -50px;top: -1px;">
                        <span class="btn close">&times;</span>
                    </li>
                    <li>门店</li>
                    <li>星享俱乐部</li>
                    <li>菜单</li>
                    <li class="divider"></li>
                    <li>星巴克移动应用</li>
                    <li>星礼卡</li>
                    <li>星巴克臻选™</li>
                    <li>啡快™ - 在线点 到店取</li>
                    <li>专星送™</li>
                    <li>咖啡星讲堂</li>
                    <li>上海烘培工坊</li>
                    <li>关于星巴克</li>
                    <li>帮助中心</li>
                    <li class="divider"></li>
                    <li class="auth">
                        <button class="login btn"><i class="iconfont icon-denglu"></i> 登录</button>
                        <button class="register">注册</button>
                    </li>
                    <li class="bottom">English | 隐私政策 | 使用条款</li>
                </ul>
            </header>
            <div class="col-lg-8 ml-auto right-content">
                <section class="row">
                    <div class="col-12 carousel slide" data-ride="carousel" id="img_outer" data-interval="3000">
                        <ul class="carousel-inner">
                            <li class="carousel-item active"><img src="./images/kv1.jpg" class="img-fluid"></li>
                            <li class="carousel-item"><img src="./images/kv2.jpg" class="img-fluid"></li>
                            <li class="carousel-item"><img src="./images/kv3.jpg" class="img-fluid"></li>
                            <li class="carousel-item"><img src="./images/kv4.jpg" class="img-fluid"></li>
                        </ul>
                        <a href="#img_outer" class="carousel-control-prev" data-slide="prev">
                            <span class="carousel-control-prev-icon p-3"></span>
                        </a>
                        <a href="#img_outer" class="carousel-control-next" data-slide="next">
                            <span class="carousel-control-next-icon p-3"></span>
                        </a>
                        <ul class="carousel-indicators">
                            <li class="active" data-target="#img_outer" data-slide-to="0"></li>
                            <li data-target="#img_outer" data-slide-to="1"></li>
                            <li data-target="#img_outer" data-slide-to="2"></li>
                            <li data-target="#img_outer" data-slide-to="3"></li>
                        </ul>
                    </div>
                </section>
                <section class="row p-4 imgs">
                    <div class="col-md-4"><img class="img-fluid mouse-enter" src="./images/img_01.jpg"></div>
                    <div class="col-md-4"><img class="img-fluid mouse-enter" src="./images/img_02.jpg"></div>
                    <div class="col-md-4"><img class="img-fluid mouse-enter" src="./images/img_03.jpg"></div>
                </section>
                <section class="row club p-5 align-items-center justify-content-around text-center text-md-left">
                    <div class="col-md-5 col-lg-6">
                        <h2>星享俱乐部</h2>
                        <div class="description mt-5">
                            开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。<a href="#">了解更多 ›</a>
                        </div>
                        <div class="auth mt-5">
                            <button>注册</button>
                            <button>登录</button>
                        </div>
                    </div>
                    <div class="col-md-4 col-lg-5 mt-5 mt-md-0">
                        <img src="./images/logo-msr-new.svg">
                    </div>
                </section>
                <section class="row tmall text-center py-5 justify-content-center">
                    <div class="col-12">
                        <h2>星巴克精选</h2>
                        <div class="description mt-5">在星巴克天猫旗舰店发现更多咖啡心意</div>
                    </div>
                    <div class="my-card border rounded mouse-enter">
                        <img src="./images/tmall-card-01.png" alt="">
                        <h4>会员星礼包</h4>
                        <div class="description mb-5">
                            星享卡新升级
                            <br>更多心意好礼
                        </div>
                        <a href="">了解更多›</a>
                    </div>
                    <div class="my-card border rounded mouse-enter">
                        <img src="./images/tmall-card-02.png" alt="">
                        <h4>星礼卡</h4>
                        <div class="description mb-5">
                            用一份心礼
                            <br>让心意相随
                        </div>
                        <a href="">了解更多›</a>
                    </div>
                    <div class="my-card border rounded mouse-enter">
                        <img src="./images/tmall-card-03.png" alt="">
                        <h4>电子产品券</h4>
                        <div class="description mb-5">
                            心意
                            <br>从这一杯开始
                        </div>
                        <a href="">了解更多›</a>
                    </div>
                    <div class="my-card border rounded mouse-enter">
                        <img src="./images/tmall-card-04.png" alt="">
                        <h4>咖啡生活</h4>
                        <div class="description mb-5">
                            星巴克
                            <br>用心制作
                        </div>
                        <a href="">了解更多›</a>
                    </div>
                </section>
                <section class="row culture p-5 position-relative d-block">
                    <div class="col-12 text-center">
                        <h2>1912 派克街 | 咖啡星讲堂</h2>
                        <div class="description mt-5">了解更多星巴克咖啡文化</div>
                    </div>
                    <ul class="card-list position-absolute pl-5">
                        <li class="mouse-enter">
                            <img class="card-img-top" src="./images/scroll_img_01.jpg" alt="">
                            <span>咖啡知识</span>
                            <div class="card-footer">咖啡的起源与培植</div>
                        </li>
                        <li class="mouse-enter">
                            <img class="card-img-top" src="./images/scroll_img_02.jpg" alt="">
                            <span>咖啡品鉴</span>
                            <div class="card-footer">咖啡调制</div>
                        </li>
                        <li class="mouse-enter">
                            <img class="card-img-top" src="./images/scroll_img_03.jpg" alt="">
                            <span>咖啡知识</span>
                            <div class="card-footer">咖啡烘培</div>
                        </li>
                        <li class="mouse-enter">
                            <img class="card-img-top" src="./images/scroll_img_04.jpg" alt="">
                            <span>咖啡品鉴</span>
                            <div class="card-footer">手冲咖啡</div>
                        </li>
                    </ul>
                    <button class="btn carousel-control-prev-icon left-btn"></button>
                    <button class="btn carousel-control-next-icon right-btn"></button>
                </section>
                <footer class="row d-sm-none fixed-bottom pt-2">
                    <ul class="col-12 d-flex justify-content-between text-center">
                        <li class="active">
                            <i class="iconfont icon-shouye"></i>
                            <br>主页
                        </li>
                        <li>
                            <i class="iconfont icon-mendian"></i>
                            <br>门店
                        </li>
                        <li>
                            <i class="iconfont icon-denglu"></i>
                            <br>我的账户
                        </li>
                        <li>
                            <i class="iconfont icon-caidan"></i>
                            <br>菜单
                        </li>
                        <li>
                            <i class="iconfont icon-gengduo"></i>
                            <br>更多
                        </li>
                    </ul>
                </footer>
            </div>
        </div>
    </div>
    <script crossorigin="anonymous"
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
        src="//lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
    <script crossorigin="anonymous"
        integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA=="
        src="//lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>
    <script>
        function $(selector) {
            return document.querySelector(selector)
        }
        function $$(selector) {
            return document.querySelectorAll(selector)
        }
        var show_btn = $('header .show-btn')
        var pop_up = $('header .popup')
        var close_btn = $('header .popup .close')
        var navbar = $('header .navbar')
        var header_body = $('header .body')
        var right_content = $('.right-content')
        var card_group = $('.culture .card-list')
        var left_btn = $('.culture .left-btn')
        var right_btn = $('.culture .right-btn')
        var footer_item = $$('.right-content footer li')
        show_btn.onclick = function () {
            pop_up.classList.remove('hide')
            this.style.display = 'none'
            if (innerWidth < 992)
                right_content.style.display = 'none'
        }
        close_btn.onclick = function () {
            pop_up.classList.add('hide')
            show_btn.style.display = ''
            if (innerWidth < 992)
                right_content.style.display = ''
        }
        var last_time = 0;
        left_btn.onclick = function () {
            var now_time = + new Date()
            if (now_time - last_time > 500) {
                move_card(parseInt(getComputedStyle(card_group).left) + 150)
            }
            last_time = now_time
        }
        right_btn.onclick = function () {
            var now_time = + new Date()
            if (now_time - last_time > 500) {
                move_card(parseInt(getComputedStyle(card_group).left) - 150)
            }
            last_time = now_time
        }
        function move_card(offset) {
            card_group.style.left = offset + 'px'
        }
        card_group.addEventListener('transitionend', function () {
            var css_obj = getComputedStyle(card_group);
            if (parseInt(css_obj.left) >= 20) {
                left_btn.style.display = 'none'
            } else {
                left_btn.style.display = 'block'
            }
            if (parseInt(css_obj.right) > 0) {
                right_btn.style.display = 'none'
            } else {
                right_btn.style.display = 'block'
            }
        })
        var last = footer_item[0]
        footer_item.forEach(function (item, index) {
            item.onclick = function () {
                this.classList.add('active')
                last && last.classList.remove('active')
                last = this
                if (index == 4) {
                    show_btn.click()
                }
            }
        })
        window.onresize = function () {
            if (innerWidth < 992 && !pop_up.classList.contains('hide')) {
                right_content.style.display = 'none'
            } else {
                right_content.style.display = ''
            }
        }
    </script>
</body>
</html>